<div class="sheet-info wrap feature-wrap">
  <div class="g-wrap6">
    <div class="m-info clearfix">
      <div class="cover">
        <img [src]="sheetInfo.coverImgUrl" alt="" srcset="">
        <div class="mask"></div>
      </div>
      <div class="cnt">
        <div class="cntc">
          <div class="hd clearfix">
            <i class="f-pr"></i>
            <div class="tit">
              <h2 class="f-ff2 f-brk">{{sheetInfo.name}}</h2>
            </div>
          </div>
          <div class="user f-cb">
            <a class="face" [hidden]='!sheetInfo.creator'  [href]="'//music.163.com/artist?id=' + sheetInfo.userId">
              <img [src]="sheetInfo.creator?.avatarUrl" [alt]="sheetInfo.creator?.nickname" srcset="">
            </a>
            <span class="name">
              <a [routerLink]="['/singer', sheetInfo.userId]" class="s-fc7">{{sheetInfo.creator?.nickname}}</a>
            </span>
            <span class="time s-fc4">{{sheetInfo.createTime | date: 'yyyy-MM-dd'}}</span>
          </div>
          <div class="btns">
            <nz-button-group class="btn">
              <button class="play" nz-button nzType="primary" (click)="onAddSongs(sheetInfo.tracks, true)">
                <i nz-icon nzType='play-circle' nzTheme='outline'></i>播放
              </button>
              <button class="add" nz-button nzType="primary" (click)="onAddSongs(sheetInfo.tracks)">+</button>
            </nz-button-group>
            <button class="btn like" nz-button>
              <span>收藏</span>({{sheetInfo.subscribedCount}})
            </button>
            <button class="btn share" nz-button>
              <span>分享</span>({{sheetInfo.shareCount}})
            </button>
          </div>
          <div class="tags clearfix">
            <span>标签</span>
            <div class="tag-wrap">
              <nz-tag *ngFor='let item of sheetInfo.tags'>{{item}}</nz-tag>
            </div>
          </div>

          <div class="intr f-brk" [class.f-hide]='controlDesc.isExpand'>
            <p [innerHTML]='description.short'></p>
          </div>
          <div class="intr f-brk" [class.f-hide]='!controlDesc.isExpand'>
            <p [innerHTML]='description.long'></p>
          </div>
          <div class="expand" (click)="toggleDesc()" *ngIf='description.long'>
            <span>{{controlDesc.label}}</span>
            <i nz-icon [nzType]='controlDesc.iconCls' nzTheme='outline'></i>
          </div>
        </div>
      </div>
    </div>
    <div class="wy-sec">
      <div class="u-title wy-sec-wrap clearfix">
        <h3 class="wy-sec-tit">
          <span class="f-ff2">歌曲列表</span>
        </h3>
        <span class="sub s-fc3">
          {{sheetInfo.tracks.length}} 首歌
        </span>
        <div class="more s-fc3">
          播放：
          <strong class="s-fc6">{{sheetInfo.playCount}}</strong>
          次
        </div>
      </div>
      <nz-table
        class="wy-table"
        #basicTable
        [nzData]='sheetInfo.tracks'
        [nzFrontPagination]='false'
        nzBordered
        nzNoResult='暂无音乐！'
      >
        <thead>
          <tr>
            <th nzWidth='80px'></th>
            <th >标题</th>
            <th nzWidth='120px'>时长</th>
            <th nzWidth='80px'>歌手</th>
            <th >专辑</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of basicTable.data; index as i">
            <td class="first-col">
              <span>{{i + 1}}</span>
              <i class="ico play-song" [class.current]="currentIndex == i" title="播放" (click)='onAddSong(item, true)'></i>
            </td>
            <td class="song-name">
              <a [routerLink]="['/songInfo',item.id]">{{item.name}}</a>
            </td>
            <td class="time-col">
              <span>{{item.dt / 1000 | formatTime}}</span>
              <p class="icons">
                <i class="ico add" title='添加' (click)='onAddSong(item)'></i>
                <i class="ico like" title='收藏'></i>
                <i class="ico share" title='分享'></i>
              </p>
            </td>
            <td>
              <ng-container *ngFor="let singer of item.ar; last as isLast">
                <a [routerLink]="['/singer', singer.id]">{{singer.name}}</a>
                <em [hidden]='isLast'>/</em>
              </ng-container>
            </td>
            <td>
              {{item.al.name}}
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>
